<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${resource != null ? resource.title + ' - milkcode' : '资源详情 - milkcode'}">资源详情 - milkcode</title>
    <link rel="stylesheet" href="/styles.css">
    <link rel="stylesheet" href="/resource-detail.css">
    <script th:if="${session.user == null}" src="/js/ad.js"></script>
</head>
<body>
    <header>
        <div class="header-content">
            <h1>milkcode</h1>
            <nav class="header-nav">
                <div class="search-container">
                    <input type="text" class="search-input" placeholder="搜索资源..." id="searchInput">
                    <svg class="search-icon" viewBox="0 0 24 24" style="cursor: pointer;" onclick="handleSearch()">
                        <path fill="currentColor" d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                    </svg>
                </div>
                <div class="nav-buttons">
                    <a href="/" class="nav-link">返回首页</a>
                    <a href="/login" class="login-btn" th:if="${session.user == null}">登录去广告</a>
                    <div class="user-info" th:if="${session.user != null}">
                        <a href="/my-collections" class="nav-link">我的收藏</a>
                        <span class="user-name" th:text="${session.user.userName}">用户名</span>
                        <a href="javascript:void(0)" class="nav-link" onclick="handleLogout()">退出</a>
                    </div>
                </div>
            </nav>
        </div>
    </header>

    <main class="resource-detail" th:if="${resource != null}">
        <div class="resource-container">
            <div class="resource-header">
                <div class="resource-cover">
                    <img th:src="${resource.coverUrl != null ? resource.coverUrl : 'https://picsum.photos/800/400'}" 
                         th:alt="${resource.title}"
                         onerror="this.src='https://picsum.photos/800/400'">
                </div>
                <div class="resource-info">
                    <h2 th:text="${resource.title}">资源标题</h2>
                    <div class="resource-meta">
                        <span th:if="${resource.author}" th:text="'作者：' + ${resource.author}">作者：未知</span>
                        <span th:if="${resource.createTime}" 
                              th:text="'发布日期：' + ${#dates.format(resource.createTime, 'yyyy年M月d日')}">发布日期：2024年3月</span>
                        <span th:if="${resource.viewCount != null}" th:text="'浏览：' + ${resource.viewCount}">浏览：0</span>
                        <span th:if="${resource.likeCount != null}" th:text="'点赞：' + ${resource.likeCount}">点赞：0</span>
                    </div>
                    <div class="resource-actions">
                        <a th:if="${resource.resourceUrl != null}" 
                           th:href="${resource.resourceUrl}" 
                           class="download-btn" 
                           target="_blank">立即访问</a>
                        <button class="share-btn" onclick="toggleCollection()">
                            <span th:text="${isCollected ? '取消收藏' : '收藏'}">收藏</span>
                        </button>
                    </div>
                </div>
            </div>

            <div class="content-section">
                <h3>资源简介</h3>
                <p th:text="${resource.content}">资源描述内容</p>
            </div>

            <div class="content-section" th:if="${resource != null && resource.author != null}">
                <h3>打赏作者</h3>
                <div class="reward-section">
                    <div class="reward-info">
                        <p>如果您觉得这个资源对您有帮助，欢迎打赏作者</p>
                        <p class="author-name" th:text="${'作者：' + resource.author}">作者：贫困的程序员</p>
                    </div>
                    <div class="qrcode-container">
                        <div class="qrcode-item">
                            <img src="/weichat.jpg" alt="微信打赏码" class="qrcode-img">
                            <p>微信打赏</p>
                        </div>
                        <div class="qrcode-item">
                            <img src="/zhifubao.jpg" alt="支付宝打赏码" class="qrcode-img">
                            <p>支付宝打赏</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 资源不存在时显示 -->
    <main class="resource-detail" th:if="${resource == null}">
        <div class="resource-container">
            <div class="no-resource">
                <h2>资源不存在或已被删除</h2>
                <p>抱歉，您访问的资源不存在或已被删除。</p>
                <a href="/" class="back-home">返回首页</a>
            </div>
        </div>
    </main>

    <footer>
        <p>© 2024 milkcode. All rights reserved.</p>
    </footer>

    <!-- 添加收藏功能的 JavaScript -->
    <script th:inline="javascript">
        const resourceId = /*[[${resource != null ? resource.id : null}]]*/ null;
        const resourceTitle = /*[[${resource != null ? resource.title : null}]]*/ null;
        let isCollected = /*[[${isCollected}]]*/ false;

        async function toggleCollection() {
            if (!resourceId) return;
            
            try {
                const response = await fetch(`/api/resource/${resourceId}/collection`, {
                    method: isCollected ? 'DELETE' : 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    }
                });

                const result = await response.json();
                
                if (!response.ok) {
                    if (response.status === 401) {
                        // 未登录，跳转到登录页面
                        window.location.href = '/login';
                        return;
                    }
                    throw new Error(result.message || '操作失败');
                }

                isCollected = !isCollected;
                const btn = document.querySelector('.share-btn span');
                if (btn) {
                    btn.textContent = isCollected ? '取消收藏' : '收藏';
                }
            } catch (error) {
                console.error('收藏操作失败:', error);
                alert(error.message || '操作失败，请稍后重试');
            }
        }

        // 处理搜索
        function handleSearch() {
            const keyword = document.getElementById('searchInput').value.trim();
            if (keyword) {
                window.location.href = `/?keyword=${encodeURIComponent(keyword)}`;
            } else {
                window.location.href = '/';
            }
        }

        // 添加回车搜索功能
        document.getElementById('searchInput').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                handleSearch();
            }
        });

        // 处理退出登录
        async function handleLogout() {
            try {
                const response = await fetch('/api/logout');
                const result = await response.json();
                
                if (result.success) {
                    window.location.reload();
                } else {
                    alert(result.message || '退出失败，请稍后重试');
                }
            } catch (error) {
                console.error('退出请求失败:', error);
                alert('退出请求失败，请稍后重试');
            }
        }
    </script>

    <!-- 添加样式 -->
    <style>
        .resource-detail {
            margin-top: 90px;
            padding-top: 2rem;
        }
        @media (max-width: 600px) {
            .resource-detail {
                margin-top: 180px;
                padding-top: 2rem;
            }
        }

        .resource-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 1rem;
        }

        .resource-header {
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 2rem;
        }

        .no-resource {
            text-align: center;
            padding: 4rem 2rem;
            color: #64748b;
            background: white;
            border-radius: 12px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            margin-top: 2rem;
        }

        .no-resource h2 {
            font-size: 1.5rem;
            margin-bottom: 1rem;
            color: #1e293b;
        }

        .no-resource p {
            margin-bottom: 2rem;
        }

        .back-home {
            display: inline-block;
            padding: 0.75rem 1.5rem;
            background: var(--primary-color);
            color: white;
            text-decoration: none;
            border-radius: 8px;
            transition: all 0.3s ease;
        }

        .back-home:hover {
            background: var(--secondary-color);
            transform: translateY(-2px);
        }

        .resource-meta {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin: 1rem 0;
            color: #64748b;
            font-size: 0.875rem;
        }

        .resource-meta span {
            display: inline-flex;
            align-items: center;
        }

        .resource-meta span:not(:last-child)::after {
            content: '|';
            margin-left: 1rem;
            color: #e2e8f0;
        }

        .share-btn {
            background: #f1f5f9;
            color: #64748b;
            border: none;
            padding: 0.75rem 1.5rem;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .share-btn:hover {
            background: #e2e8f0;
            color: #1e293b;
        }

        .share-btn.collected {
            background: var(--primary-color);
            color: white;
        }

        .user-info {
            display: flex;
            align-items: center;
            gap: 15px;
            background: #f8f9fa;
            padding: 6px 15px;
            border-radius: 8px;
            border: 1px solid #e9ecef;
        }

        .user-name {
            color: #333;
            font-weight: 500;
            font-size: 14px;
            padding: 0 10px;
            border-right: 1px solid #dee2e6;
        }

        .user-info .nav-link {
            color: #495057;
            text-decoration: none;
            font-size: 13px;
            padding: 4px 10px;
            border-radius: 4px;
            transition: all 0.2s ease;
        }

        .user-info .nav-link:hover {
            color: var(--primary-color);
            background: #e9ecef;
        }

        /* 调整导航栏按钮的样式 */
        .nav-buttons {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .login-btn {
            background: var(--primary-color);
            color: white;
            padding: 6px 16px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 13px;
            transition: all 0.2s ease;
        }

        .login-btn:hover {
            background: var(--secondary-color);
        }

        .reward-section {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
        }

        .reward-info {
            text-align: center;
            margin-bottom: 2rem;
        }

        .reward-info p {
            color: #64748b;
            margin: 0.5rem 0;
        }

        .author-name {
            font-size: 1.1rem;
            color: #1e293b !important;
            font-weight: 500;
        }

        .qrcode-container {
            display: flex;
            justify-content: center;
            gap: 3rem;
            flex-wrap: wrap;
        }

        .qrcode-item {
            text-align: center;
        }

        .qrcode-img {
            width: 300px;
            height: 300px;
            border-radius: 8px;
            border: 1px solid #e2e8f0;
            padding: 0.5rem;
            background: white;
            transition: transform 0.3s ease;
            object-fit: contain;
        }

        .qrcode-img:hover {
            transform: scale(1.05);
        }

        .qrcode-item p {
            margin-top: 1rem;
            color: #64748b;
            font-size: 1.1rem;
        }

        @media (max-width: 768px) {
            .qrcode-container {
                gap: 2rem;
            }
            
            .qrcode-img {
                width: 250px;
                height: 250px;
            }
        }

        @media (max-width: 480px) {
            .qrcode-img {
                width: 200px;
                height: 200px;
            }
        }
    </style>
</body>
</html> 